<style>
	.examples {cursor: pointer; margin-left: 15px;}
</style>

<div class="layui-form form-wrap">
	<div class="layui-form-item">
		<label class="layui-form-label">后台登录验证码：</label>
		<div class="layui-input-block">
			<input type="checkbox" name="shop_login" value="1" lay-skin="switch" {if condition="$config_info.shop_login == 1" }checked {/if} lay-title="启用|关闭"/>
		</div>
		<div class="word-aux">设置后台登录验证码是否开启<a onclick="showDemo()" class="examples text-color">查看示例</a></div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">前台登录验证码：</label>
		<div class="layui-input-block">
			<input type="checkbox" name="shop_reception_login" value="1" lay-skin="switch" {if condition="$config_info.shop_reception_login == 1" }checked {/if} lay-title="启用|关闭"/>
		</div>
		<div class="word-aux">设置前台登录验证码是否开启<a onclick="showDemo2()" class="examples text-color">查看示例</a></div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">前台注册验证码：</label>
		<div class="layui-input-block">
			<input type="checkbox" name="shop_reception_register" value="1" lay-skin="switch" {if condition="$config_info.shop_reception_register == 1" }checked {/if} lay-title="启用|关闭"/>
		</div>
	</div>
	<div class="form-row">
		<button class="layui-btn" lay-submit lay-filter="save">保存</button>
	</div>
</div>

<script>
	layui.use('form', function() {
		var form = layui.form,
			repeat_flag = false; //防重复标识
		form.render();

		form.on('submit(save)', function(data) {
			
			if (repeat_flag) return false;
			repeat_flag = true;
			
			$.ajax({
				type: 'POST',
				dataType: 'JSON',
				url: ns.url("shop/config/captcha"),
				data: data.field,
				success: function(res) {
					layer.msg(res.message);
					repeat_flag = false;
				}
			});
		});
	});
	function showDemo(){
	    layer.open({
	        title: '查看示例',
	        type: 1,
			area: ['600px', '660px'],
			content: '<img style="margin: 70px 30px;" src="SHOP_IMG/id_code1.png">'
	    })
	}
	function showDemo2(){
	    layer.open({
	        title: '查看示例',
	        type: 1,
			area: ['600px', '660px'],
			content: '<img style="margin: 20px 40px;" src="SHOP_IMG/id_code2.png">'
	    })
	}
</script>